<template>
  <div class="search">
    <!-- <span class="demonstration">日期：</span> -->
    <el-date-picker
      :disabled="disabled"
      size="small"
      v-model="time"
      type="daterange"
      align="left"
      placeholder="选择日期范围"
      :picker-options="pickerOptions2"
      @change="handleChange">
    </el-date-picker>
    <!-- <span>课程：</span> -->
    <el-select :disabled="isShow" v-model="courseType" clearable placeholder="请选择课程" size="small" @change="handleChange">
      <el-option
      v-for="(item,index) in typeList"
      :key="index"
      :label="item.name"
      :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pickerOptions2: {
        shortcuts: [
          {
            text: "1个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              let eYear = start.getFullYear();
              let eMonth = start.getMonth() + 1;
              let eDay = start.getDate();
              if (eMonth < 2) {
                eYear -= 1;
                eMonth = 12;
              } else {
                eMonth -= 1;
              }
              start.setTime(new Date(eYear, eMonth - 1, eDay));
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "2个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              let eYear = start.getFullYear();
              let eMonth = start.getMonth() + 1;
              let eDay = start.getDate();
              if (eMonth < 3) {
                eYear -= 1;
                eMonth += 10;
              } else {
                eMonth -= 2;
              }
              start.setTime(new Date(eYear, eMonth - 1, eDay));
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              let eYear = start.getFullYear();
              let eMonth = start.getMonth() + 1;
              let eDay = start.getDate();
              if (eMonth < 7) {
                eYear -= 1;
                eMonth += 6;
              } else {
                eMonth -= 6;
              }
              start.setTime(new Date(eYear, eMonth - 1, eDay));
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "1年内",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              let eYear = start.getFullYear();
              let eMonth = start.getMonth() + 1;
              let eDay = start.getDate();
              eYear -= 1;
              start.setTime(new Date(eYear, eMonth - 1, eDay));
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      time: "",
      courseType: "",
      typeList: {}
    };
  },
  created() {
    let filData = Lockr.get("filData");
    if(filData){
      this.time = filData.time;
      this.courseType = filData.courseType;
    }
    axios.post(PATH+"System/courseTypeLists").then(res => {
      this.typeList = res.data;
    });
  },
  methods: {
    handleChange(){
      Lockr.set("filData", {time:this.time,courseType:this.courseType});
      this.fetchData(this.time,this.courseType);
    }
  },
  props: ["fetchData","isShow","disabled"]
};
</script>
<style lang="css" scoped>
.search {
  position: fixed;
  top: 25px;
  left: 450px;
  z-index: 999;
  color: #666;
  /* width: 50%; */
}
.search .el-date-editor--daterange.el-input,
.search .el-select {
  max-width: 190px;
  margin-right: 30px;
}
.search .el-select-dropdown__wrap .el-scrollbar__wrap{
  margin: 0;
}
</style>
